<template>
	<view class="">
		<view class="mask" v-if='mask'></view>		
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false">
			<swiper-item v-for="(list,index) in collectList" :key="index">
				<view v-if="Math.abs(k-index)<=1">
					<view>
						<!-- 
						1.v-if：用于控制视频在节点的渲染数
						2.muted的默认值是 false，代表默认是禁音视频的
						3.http-cache默认开启视频缓存
						4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
						5.show-loading：这里默认去掉播放转圈的标志
						v-if="Math.abs(k-index)<=1"
						 -->
						<video
						v-if="isShow"
						:id="list.id+''+index"
						:loop="true"
						:muted="list.isplay"
						:controls="false"
						:http-cache="true"
						:page-gesture="false"
						:show-fullscreen-btn="false"
						:show-loading="false"
						:show-center-play-btn="false"
						:enable-progress-gesture="false"
						:src="list.url"
						@ended="ended"
						@click="tapVideoHover(list.state,$event)"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: -1;'"
						></video>
					</view>
					<!-- 播放状态：pause 的时候就会暂停 -->
					<view class="videoHover flex" @click="tapVideoHover(list.state,$event)" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
						<image v-if="list.state=='pause'" class="playState" src="@/static/img/index/play.png"></image>
					</view>
					<view class="userInfo">
						<!-- 1.头像 -->
						<view @click.stop="clickImage(list)">
							<image @click="tozuozhe" class="userAvatar" :src="admin.cover" mode="aspectFill"></image>
							<view class="add-follow-btn" v-if="!admin.concern">
								<i class="iconfont iconjia1 inline-block"></i>
							</view>
						</view>
						<!-- 2.点赞 -->
						<view @click="cLike(list,index);" class="flex" style="opacity: 0.9; margin-top: 17px;">
							<image v-if="list.is_love == 1" src="@/static/img/index/xin.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
							<image v-if="list.is_love == 0" src="@/static/img/index/xin-2.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;" :class="{'likeNumActive':list.love}">{{list.give_count}}</text>
						</view>
						<!-- 3.分享 -->
						<view class="flex" style="opacity: 0.9; margin-top: 17px;position: relative;">
							<image src="@/static/img/index/share-fill.png" style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">分享</text>
							<button open-type="share" class="icon-box" style="position: absolute;width: 100%;height:100%;opacity: 0;"></button>
						</view>
						<view @click="addVideo(list)" v-if="!showBtn" class="flex" style="opacity: 0.9; margin-top: 17px;">
							<image class="add-img" src="../../static/dianying.png" mode="widthFix"></image>
							<text style="color: #FFFFFF;font-size: 14px; text-align: center; margin-top: 10px; font-weight: bold;">追剧</text>
						</view>
						
					</view>
					<!-- 最底下的文字部分 -->
					<view class="content" v-if="showInfo">
						<view class="userName" :style="'width: '+ (windowWidth - 90) +'px;'">
							<view class="video-tip" @click="showpopu(list,index)">
								『{{title}}』 第{{k+1}}集丨选集 >
							</view>
						</view>
					</view>
					
					<view class="" v-if="iosFlag == true">
						<!-- 章节结束弹窗 -->
						<van-popup :show="Endshow" :lock-scroll="true"
							:safe-area-inset-bottom="true" position="bottom"
							custom-style="height: auto;padding:20px 10px 4px 10px;">
							<view class="popup" v-roll:visible="bodyVisible">
								<!-- 会员弹窗 -->
								<view class="popup1-bottom" v-if="list.is_members == 1&&is_members == 0">
									<view class="popup-text">本集是会员剧集</view>
									<view class="popup-text">感谢您对作者的支持,开通会员后继续观看</view>
									<view>
										<image v-if="is_members == 1" class="icon-Image"
											src="../../static/huiyuan1-01.png" mode=""><text
												style="color: orange;">开通会员即可免费观看</text>
									</view>
									<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
										@click="memberPay(list)">
										会员解锁剧集
									</view>
								</view>
								<!-- 付费弹窗 -->
								<view class="popup1-bottom" v-if="list.is_pay == 1">
									<view class="popup-text">本集是付费剧集</view>
									<view class="popup-text">感谢您对作者的支持,购买后继续观看</view>
									<text class="popup-btn2" @click="openPay(list)">点击购买本集</text>
									<view class="popup-pay" v-if="is_members == 0" @click="openMemberPay(list)">
										开通会员,充值额外赠送K币 ></view>
									<view class="popup-gold" v-if="list.is_members == 0">账户余额：<text
											style="color: #D81E06;margin-right: 8rpx;">{{book_currency}}</text> K币
									</view>
								</view>
								<view v-if="list.is_pay == 0&&list.is_members==0">
									<view class="popup1-bottom" v-if="!showBtn">
										<view>--- 加入追剧，每日12点更新一集 ---</view>
										<view class="popup-text">每日12点更新一集</view>
										<view class="popup-text">点击追剧获取更新通知</view>
										<text class="popup-btn" @click="addVideo(list)">追剧</text>
										<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
											@click="memberPay(list)">
											会员解锁剧集
										</view>
									</view>
									<view class="popup1-bottom" v-else>
										<view>--- 追剧成功，每日12点更新一集 ---</view>
										<view class="popup-text">关注公众号</view>
										<view class="popup-text">剧集更新随时掌握</view>
										<text class="popup-btn" @click="gogzh">关注公众号</text>
										<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
											@click="memberPay(list)">
											会员解锁剧集
										</view>
									</view>
								</view>
							</view>
						</van-popup>
						<van-popup :show="Endshow2" @close="onEndClose2" :lock-scroll="true"
							:safe-area-inset-bottom="true" position="bottom"
							custom-style="height: auto;padding:20px 10px 4px 10px;">
							<view class="popup1-bottom" v-if="!showBtn">
								<view v-if="list.is_members == 1&&is_members == 0">--- 本剧为会员专享剧集 ---</view>
								<view v-else-if="list.is_pay == 1">--- 本剧为收费剧集 ---</view>
								<view v-else>--- 连载中，已经看完最新一集 ---</view>
								<view class="popup-text">每日12点更新一集</view>
								<view class="popup-text">点击追剧获取更新通知</view>
								<text class="popup-btn" @click="addVideo(list)">追剧</text>
								<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
									@click="memberPay(list)">
									会员解锁剧集
								</view>
							</view>
							<view class="popup1-bottom" v-else>
								<view v-if="list.is_members == 1&&is_members == 0">--- 本剧为会员专享剧集 ---</view>
								<view v-else-if="list.is_pay == 1">--- 本剧为付费剧集 ---</view>
								<view v-else>--- 追剧成功，每日12点更新一集 ---</view>
								<view class="popup-text">关注公众号</view>
								<view class="popup-text">剧集更新随时掌握</view>
								<text class="popup-btn" @click="gogzh">关注公众号</text>
								<view class="popup-vip" v-if="list.is_members == 1&&is_members == 0"
									@click="memberPay(list)">
									会员解锁剧集
								</view>
							</view>
						</van-popup>
					</view>
					<!-- 退除追剧弹出层 -->
					<van-popup :show="Mainshow" :style="{ width: '80%' }">
						<view class="Main-popup">
							<view>加入追剧</view>
							<view class="popup-text">喜欢本剧就加入追剧吧</view>
							<view class="popupBtns">
								<text class="popup-react" @click="reactVideo">不用了</text>
								<text class="popup-add" @click="zjVideo(list)">加入追剧</text>
							</view>
						</view>
					</van-popup>
					<!-- 开通会员弹出层 -->
					<view class="" v-if="iosFlag == true">
						<van-popup :show="membersShow" @close='onCMClose' position="bottom" overlay-style="background-color: #000000;"
							custom-style="height: auto;padding:20px 10px 4px 10px;"
							:safe-area-inset-bottom="true" :style="{ width: '100%' }">
							<view class="MainBox">
								<view @click="goMembersPage" style="display: flex;align-items: center;">
									<image v-if="is_members == 1" class="icon-Image"
										src="../../static/huiyuan1-01.png" mode=""><text
											style="color: orange;">开通会员即可免费观看</text><text
											style="color: #1D1D1D;font-size: 22rpx;">了解更多会员特权 ></text>
								</view>
								<view class="view-list">
									<view v-for="(item,index) in viplist" :key="index" :class="{active: index === vip_current}" @click="handleClick(item,index)">
										<view>{{item.moth}}-1</view>
										<view class="discountPrice">{{item.discountPrice}}</view>
										<view class="originalPrice">{{item.originalPrice}}</view>
									</view>
								</view>
								<view class="openHuiyuan" @click="openHuiyuan">
									立即开通
								</view>
							</view>
						</van-popup>
					</view>
					<!-- K币充值 -->
					<view class="" v-if="iosFlag == true">
						<van-popup :show="costShow"  @close="onCMClose" position="bottom" overlay-style="background-color: #000000;"
							custom-style="height: auto;padding:20px 10px 4px 10px;"
							:safe-area-inset-bottom="true">
							<view class="costBox">
								<view>
									充值K币
								</view>
								<view class="weixin-box">
									<view class="">
										<image src="../../static/weixin.png" mode=""></image>
										<text>微信充值</text>
									</view>
									<view class="">
										账户余额：<text
											style="color: orange;margin-right: 8rpx;">{{book_currency}}</text> K币
									</view>
								</view>
								<view class="view-list">
									<view v-for="(item,index) in cateList" :key="index" :class="{active: index === k_current}" @click="selectCate(item,index)">
										<view class="num1">
											{{item.name}}
										</view>
										<view class="">
											<text>{{item.original_currency}}</text>
											<text class="tip"
												v-if="item.send_currency.length>0">+{{item.send_currency}}</text>
										</view>
										<view class="send_title">
											{{item.send_title}}
										</view>
										<view class="saleStyle" v-if="item.label.length>0">
											<text class="saleText">{{item.label}}</text>
										</view>
									</view>
									<!-- <view class="popup-bottom">
										<text>会员充值可获赠更多K币</text>
										<van-button color="linear-gradient(to right, #f7e622, #b8ae18)" round
											size="normal" @click="goDetailsCenter">
											去开通
										</van-button>
									</view> -->
								</view>
								<view class="openHuiyuan" @click="goCost">
									立即充值
								</view>
							</view>
						</van-popup>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 选集弹窗 -->
		<van-popup :show="show" @close="onClose" :lock-scroll="true" :safe-area-inset-bottom="true"
			position="bottom" custom-style="height: 50%;padding:0px 10px 4px 10px;z-index:100000;">
			<view class="popup" v-roll:visible="bodyVisible">
				<view class="popup-bottom" v-if="!showBtn">
					<text class="popup-text">每日12点更新一集，点击追剧获取更新通知</text>
					<text class="popup-btn" @click="addVideo(collectList[k])">追剧</text>
				</view>
				<view class="popup-bottom" v-else>
					<text class="popup-text">点击更新提醒了解剧集更新状态</text>
					<text class="popup-btn" @click="getguanzhu">更新提醒</text>
				</view>
				<view class="popup-top">
					{{title}}丨更新至{{collectList.length}}集
				</view>
				<view class="selectBox">
					<view class="selectItem" v-for="(el,index) in collectList" :key="index">
						<image :class="{active: el.sort === currentIndex}" :src="img" mode=""
							@click="goDetails(el,index)"></image>
						<view class="selectText">
							第{{el.sort}}集
						</view>
						<view class="lockBox" v-if="el.is_pay == 1" @click="unLockPay(el,index)">
							<image src="../../static/lock.png" mode="widthFix"></image>
						</view>
						<view class="lockBox" v-if="el.is_members == 1&&is_members == 0"
							@click="unLockMembers(el,index)">
							<view class="">
								<image src="../../static/lock.png" mode="widthFix"></image>
								<view class="is_members">
									会员解锁
								</view>
							</view>
						</view>
					</view>
					<view></view>
					<view></view>
					<view></view>
					<view></view>
					<view></view>
					<view></view>
					<view></view>
					<view></view>
				</view>
			</view>
		</van-popup>
		<van-dialog
			use-slot
			title="请关注公众号"
			:show="qrCodeShow"
			show-cancel-button
			:show-confirm-button='false'
			bind:close='qrCodeClose'
		>
			<view style="display: flex;justify-content: center;">
				<image :src="qrCode" mode="widthFix" style="width:200px" show-menu-by-longpress/>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import {
		getRecommendVideo,
		getaddPlay,
		getaddHistory,
		getMyLike,
		getSmallTheaterDetails,
		Subscribe,
		getBookGold,
		getBookorder,
		getPayVideo,
		login,
		getMoneyList,
		getMemberPackage
	} from '@/module/index.js'
	let app = getApp()
	export default {
		data() {
			return {
				give_count: 0,
				membersObj: null,
				costObj: null,
				iosFlag: app.globalData.iosFlag,
				costShow: false,
				current: 0,
				membersShow: false,
				showInfo: true,
				book_currency: 0,
				expiration_time: "--",
				BarHeight: 0,
				title: "",
				Mainshow: false,
				show: false,
				Endshow: false,
				Endshow2: false,
				num: 3371,
				sharenum: 521,
				// 双击点赞记录
				fabulousArr: [],
				// 记录点击时间判断单击还是双击，单击暂停，双击点赞
				clickTimer: null,
				// 记录点击时间
				clickTime: 0,
				// 屏幕高度
				windowHeight: uni.getSystemInfoSync().windowHeight || window.innerHeight,
				// 当前轮播的index
				currentIndex: 0,
				// 当前页的视频对象
				currentVideo: null,
				videoList: [],
				
				id: "",
				collectList: [],
				startData: {
					clientX: 0,
					clientY: 0
				},
				img: "",
				showBtn: false,
				admin: {},
				video_id: "",
				video_detail_id: "",
				nextId: "",
				lastId: "",
				is_members: 0,
				isPay: 0,
				isMembers: 0,
				viplist: [],
				cateList: [],
				
				windowWidth: 0,
				windowHeight: 0,
				platform: "",
				deleteHeight: 0,
				k: 0,
				oldVideo: "",
				voice: "",
				timeout: "",
				current: 0,
				boxStyle:{//视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				
				videoID: "",
				isShow: false,
				vip_current:0,
				k_current:0,
				mask:false,
				touchNum:0,
				
				qrCodeShow:false,
				qrCode:null,
				message:[]
			};
		},
		onShow() {
			// this.show = true
			this.getBookGold()
			
			if(this.collectList.length !== 0){
				this.collectList[this.k].state = 'play';
				uni.createVideoContext(this.collectList[this.k].id+''+this.k,this).play()
			}
		},
		onLoad(option) {
			if (uni.getStorageSync('token') == "") {
				uni.showToast({
					title: "null",
					icon: "none"
				})
				this.getCode()
			} else {
				this.video_id = option.video_id
				this.video_detail_id = option.video_detail_id
				this.getVideoDetails(this.video_id, this.video_detail_id)
			}
			
			this.platform = uni.getSystemInfoSync().platform
			var model = uni.getSystemInfoSync().model
			if(this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')){
				this.deleteHeight = 0//有 tabbar的 修改这里可以改变视频高度
			}
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.boxStyle.width = this.windowWidth + 'px'//给宽度加px
			this.boxStyle.height = this.windowHeight - this.deleteHeight;//有 tabbar的 修改这里可以改变视频高度
			
			this.getMoneyList()
			this.getMemberPackage()
			this.screenCapture()
			uni.setNavigationBarTitle({
				title: `第${this.k+1}集`
			})
		},
		onHide(){
			this.collectList[this.k].state = 'pause';//界面隐藏也要停止播放视频
			uni.createVideoContext(this.collectList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
		},

		onReady() {
			// 初始化拿到第一个视频对象
			if (this.videoList.length == 0) {
				return false
			} else {
				this.currentVideo = uni.createVideoContext(this.videoList[0].id.toString(), this);
			}
		},
		methods: {
			getMemberPackage(){
				getMemberPackage().then((res) => {
					if (res.code === 200) {
						this.viplist = res.data
					}
				})
			},
			goMembersPage() {
				uni.navigateTo({
					url: `/wxcomponents/MembershipCenter/MembershipCenter`,
					fail() {
						uni.switchTab({
							url: `/wxcomponents/MembershipCenter/MembershipCenter`,
							fail() {
								uni.showToast({
									title: '敬请期待',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			// 会员中心
			goDetailsCenter() {
				uni.navigateTo({
					url: `/wxcomponents/MembershipCenter/MembershipCenter`,
					fail() {
						uni.switchTab({
							url: `/wxcomponents/MembershipCenter/MembershipCenter`,
							fail() {
								uni.showToast({
									title: '敬请期待',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			openHuiyuan() {
				this.getBookorder(this.viplist[this.vip_current])
			},
			handleClick(el, index) {
				this.vip_current = index
				this.membersObj = el
			},
			// 微信支付
			selectCate(item, index) {
				this.k_current = index
				this.costObj = item;
			},
			goCost() {
				this.getBookorder2(this.cateList[this.k_current])
			},
			getMoneyList() {
				getMoneyList().then((res) => {
					if (res.code === 200) {
						this.cateList = res.data
					}
				})
			},
			getBookorder(item) {
				let obj = {
					total_fee: item.money,
					name: item.moth,
					number: item.num,
					type: 2,
					video_id:this.video_id
				}
				getBookorder(obj).then((res) => {
					var self = this
					if (res.code === 200) {
						var record_id = res.data.pay_record_id
						uni.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							success(res) {
								self.membersShow = false
								setTimeout(function() {
									self.getBookGold()
									self.Endshow = false
									self.collectList[self.k].state = 'play';
									uni.createVideoContext(self.collectList[self.k].id+''+self.k,self).play()
								}, 1000);
							},
							fail(err) {
								if (err.errMsg = "requestPayment:fail cancel") {
									uni.showToast({
										title: `取消支付`,
										icon: 'none'
									});
								} else {
									uni.showToast({
										title: `支付失败`,
										icon: 'none'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			getBookorder2(item) {
				let obj = {
					total_fee: item.recharge_price * 100,
					name: item.name,
					number: item.sum_currency,
					video_id:this.video_id
				}
				getBookorder(obj).then((res) => {
					var self = this
					if (res.code === 200) {
						var record_id = res.data.pay_record_id
						uni.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							success(res) {
								self.costShow = false
								setTimeout(function() {
									self.getBookGold()
									self.getVideoDetails(self.video_id, self.videoList[0].id)
								}, 1000);
							},
							fail(err) {
								if (err.errMsg = "requestPayment:fail cancel") {
									uni.showToast({
										title: `取消支付`,
										icon: 'none'
									});
								} else {
									uni.showToast({
										title: `支付失败`,
										icon: 'none'
									});
								}
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			getBookGold() {
				getBookGold().then((res) => {
					if (res.code === 200) {
						this.book_currency = res.data.money
						this.is_members = res.data.is_members
						this.expiration_time = res.data.expiration_time
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			memberPay(el) {
				this.membersShow = true
			},
			openPay(el) {
				if(this.book_currency < el.pay_amount * 100 ){
					this.costShow = true
				}else{
					this.getPayVideo(el)
				}
			},
			openMemberPay(el) {
				this.membersShow = true
			},
			unLockPay(el,index) {
				this.show = false
				// this.getPayVideo(el)
				this.k = this.current = index
				this.currentIndex = index+1
			},
			unLockMembers(el,index) {
				this.show = false
				// if (this.is_members == 0 && el.is_members == 1) {
				// 	this.membersShow = true
				// }
				// this.getVideoDetails(el.video_id, el.id)
				this.k = this.current = index
				this.currentIndex = index+1
			},
			goBack() {
				this.show = false
				if (this.showBtn == true) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.costShow = false
					this.Mainshow = true
				}
			},
			reactVideo() {
				this.Mainshow = false
				uni.navigateBack({
					delta: 1
				});
			},
			zjVideo(item) {
				// 发起请求
				let obj = {
					video_id: item.video_id,
					video_detail_id: item.id,
					sort: item.sort
				}
				getaddPlay(obj).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: "追剧成功",
							icon: "none"
						})
						this.showBtn = true
						// uni.navigateBack({
						// 	delta: 1
						// });
						// this.getRecommendVideo()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			getPayVideo(el) {
				let obj = {
					video_detail_id: el.id
				}
				getPayVideo(obj).then((res) => {
					// this.getVideoDetails(this.video_id, el.id)
					this.getBookGold()
					let stoTimer = setTimeout(() => {
						clearTimeout(stoTimer)
						stoTimer = null
						if (res.code === 500) {
							if (app.globalData.iosFlag == false) {
								return
							}
							uni.showToast({
								title: res.message,
								icon: "none"
							})
							this.costShow = true
						} else {
							this.Endshow = false
							this.collectList[this.k].state = 'continue';
							uni.createVideoContext(this.collectList[this.k].id+''+this.k,this).play()
						}
					}, 500)
				})
			},
			// 获取视频详情数据
			getVideoDetails(video_id, id) {
				let obj = {
					video_id: video_id,
					video_detail_id: id
				}
				getSmallTheaterDetails(obj).then((res) => {
					if (res.code === 200) {
						this.videoList[0] = res.data.video
						
						this.give_count = res.data.video.give_count
						this.showBtn = res.data.chase
						this.admin = res.data.admin
						this.img = res.data.cover
						this.title = res.data.video_name
						this.currentIndex = res.data.video.sort
						this.nextId = res.data.video.next
						this.lastId = res.data.video.last
						
						this.message = res.data
						if(this.message.follow_official_accounts_sort === this.k && this.message.is_remind_user_follow === 1 && this.message.follow_official_accounts_url){
							this.qrCode = this.message.follow_official_accounts_url
							this.qrCodeShow = true;
						}
						
						uni.setNavigationBarTitle({
							title: `第${res.data.video.sort}集`
						})
						
						this.isShow = false;
						var msg = res.data.collect
						// 2.这里把视频添加到视频列表
						for (let i = 0; i < msg.length; i++) {
							msg[i].state = 'pause'
							this.collectList.push(msg[i])
						}
						
						// 3.播放当前视频
						setTimeout(()=>{
							this.isShow = true;
							this.collectList[this.k].isplay = false
							this.collectList[this.k].state = 'play'
							uni.createVideoContext(this.collectList[this.k].id+''+this.k,this).play()
							this.collectList[this.k].playIng = true
						},200)
						this.videoID = this.collectList[this.k].id
						// start - 预加载开始
						var p = this.k
						++p
						setTimeout(()=>{
							uni.createVideoContext(this.collectList[p].id+''+p,this).play()
						},20)
						clearTimeout(this.timeout)
						this.timeout = setTimeout(()=>{
							uni.createVideoContext(this.collectList[p].id+''+p,this).seek(0)
							uni.createVideoContext(this.collectList[p].id+''+p,this).pause()
						},1500)
						// end - 预加载结束
						this.getaddHistory()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			
			
			// 视频主信息页面
			clickImage(el) {
				uni.navigateTo({
					url: `/wxcomponents/createdWarp/index?id=` + this.admin.admin_id + '&video_id=' + el.video_id
				});
			},
			// 订阅接口
			Subscribe() {
				Subscribe().then((res) => {
					if (res.code === 200) {
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			// 订阅
			getguanzhu() {
				var self = this
				wx.requestSubscribeMessage({
					tmplIds: ['xdw4IeAJAWdrHqqQcmQvGvqlKEOxawlosj5F1CoiB5c',
						"VmFNZ3ak5cYoQm9jyH8C02c4FWGL7mxPKXjBeC_RI_Y"
					],
					success(res) {
						let status = res.errMsg
						if (status == "requestSubscribeMessage:ok") {
							uni.showToast({
								title: `订阅更新提醒成功`,
								icon: "none"
							})
							let stoTimer = setTimeout(() => {
								clearTimeout(stoTimer)
								stoTimer = null
								self.Subscribe()
							}, 500)
						} else {
							uni.showToast({
								title: `小主求订阅`,
								icon: "none"
							})
						}
					},
					fail(res) {
					},
					complete() {

					}
				})
			},
			
			gogzh() {
				uni.navigateTo({
					url: "/wxcomponents/officialAccount/officialAccount"
				});
			},
			// 获取观看记录
			getaddHistory() {
				// 发起请求
				let obj = {
					video_id: this.collectList[this.k].video_id,
					video_detail_id: this.collectList[this.k].video_id
				}
				getaddHistory(obj).then((res) => {
					if (res.code === 200) {
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			// 追剧
			addVideo(item) {
				// 发起请求
				let obj = {
					video_id: item.video_id,
					video_detail_id: item.id,
					sort: item.sort
				}
				getaddPlay(obj).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: "追剧成功",
							icon: "none"
						})
						this.showBtn = true
						// this.getguanzhu()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
		
			// 选集弹窗
			showpopu(item, index) {
				this.show = true
			},
			// 选集弹窗按钮
			onClose() {
				this.show = false
			},
			// 自动播放弹窗按钮
			onEndClose() {
				this.Endshow = false
			},
			onEndClose2() {
				this.Endshow2 = false
			},
			onCMClose(){
				this.costShow = false
				this.membersShow = false
			},
			
			// 选集播放
			goDetails(el, index) {
				this.onClose()
				this.k = this.current = index
				this.currentIndex = index+1
			},
			getCode() {
				var self = this
				wx.login({
					success(res) {
						if (res.code) {
							//这里可以设置需要传递的参数
							// return false
							let obj = {
								code: res.code,
							}
							//发起登录请求
							login(obj).then((res) => {
								if (res.code === 200) {
									uni.setStorageSync('token', res.data.token)
								} else {
									uni.showToast({
										title: res.message,
										icon: "none"
									})
								}
							}).catch(err => {
							})
						} else {
						}
					}
				})
			},
			
			ended(){
				// 1.播放当前视频结束时触发，自动切换下一个视频
				this.current = this.k+1
			},
			//点击播放&&暂停 双击点赞
			tapVideoHover(state,event){
				this.touchNum++;
				setTimeout(()=>{
					if(this.touchNum == 1){
						if(state=='play'||state=='continue'){
							this.collectList[this.k].state = 'pause';
						}else{
							this.collectList[this.k].state = 'continue';
						}
						if(this.collectList[this.k].state == 'continue'){
							uni.createVideoContext(this.collectList[this.k].id+''+this.k,this).play();//
						}
						if(this.collectList[this.k].state == 'pause'){
							uni.createVideoContext(this.collectList[this.k].id+''+this.k,this).pause();//
						}
					}
					if(this.touchNum >= 2){
						this.doubleLike();
					}
					this.touchNum = 0;
				},300)
				
			},
			change(event){
				this.k = event.detail.current
				uni.setNavigationBarTitle({
					title: `第${this.k+1}集`
				})
			},
			animationfinish(event){
				// 最后一个
				if(this.k == this.collectList.length - 1){
					this.Endshow2 = true
				}
			},
			// 双击点赞
			doubleLike(){
				this.cLike(this.collectList[this.k],this.k)
			},
			// 点赞
			cLike(list,index){
				let obj = {
					video_detail_id: list.id,
				}
				getMyLike(obj).then((res) => {
					if (res.code === 200) {
						if(list.is_love == 0){
							this.collectList[index].give_count += 1;
							this.collectList[index].is_love = 1
						}else{
							this.collectList[index].give_count -= 1;
							this.collectList[index].is_love = 0
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			tozuozhe(){
				uni.navigateTo({
					url: `../wxh5previewVideo/wxh5previewVideo`,
				});
			},
			screenCapture(){
				wx.setVisualEffectOnCapture({
					visualEffect: 'hidden',
				})
				if(/ios/i.test(wx.getSystemInfoSync().system)){
					if(wx.getScreenRecordingState){
						wx.getScreenRecordingState({
							success: res => {
								console.log(res.state)
								// res.state的值有两种情况 on(正在录屏) | off(没有开始录屏)
								if(res.state == 'on'){
									this.mask = true
								}else{
									this.mask = false
								}
							}
						})
					}
					if(wx.onScreenRecordingStateChanged){
						wx.onScreenRecordingStateChanged(res => {
							console.log(res.state)
							//	res.state的值有两种情况 start(开始录屏) | stop(结束录屏)
							if(res.state == 'start'){
								this.mask = true
							}else{
								this.mask = false
							}
						})
					}
				}
			},
			qrCodeClose(){
				this.qrCodeShow = false
			}
		},
		watch:{
			async k(k,old_k){
				this.isShow = false
				this.collectList[old_k].playIng = false//如果视频暂停，就加载封面
				this.collectList[old_k].isplay = true
				this.collectList[old_k].state = 'pause'
				uni.createVideoContext(this.collectList[old_k].id + '' + old_k,this).stop()
				this.collectList[k].state = 'play'
				this.isShow = true
				if(this.message.follow_official_accounts_sort == k && this.message.is_remind_user_follow === 1 && this.message.follow_official_accounts_url){
					this.qrCode = this.message.follow_official_accounts_url
					this.qrCodeShow = true;
				}
				await setTimeout( async ()=>{
					if(this.collectList[k].is_pay == 1){
						this.Endshow = true
						// this.costShow = true
						this.collectList[k].isplay = true
						this.collectList[k].state = 'pause'
						uni.createVideoContext(this.collectList[k].id + '' + k,this).pause()
					}else if(this.collectList[k].is_members == 1 && this.is_members === 0){
						this.Endshow = true
						// this.membersShow = true
						this.collectList[k].isplay = true
						this.collectList[k].state = 'pause'
						uni.createVideoContext(this.collectList[k].id + '' + k,this).pause()
					}else{
						uni.createVideoContext(this.collectList[k].id+''+k,this).play()
						await setTimeout(()=>{
							this.collectList[k].isplay = false
							this.collectList[k].playIng = true
						},50)
					}
					this.getaddHistory()
				},250)
				var p = k+1;
			}
		},
		onUnload() {
			// 取消监听用户录屏事件
			wx.offScreenRecordingStateChanged()
		}
	}
</script>

<style lang="scss" scoped>
	@import './yjy-video-slide.css';

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	page {
		position: relative;
	}

	.warp {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: 100%;
	}

	// 喜欢按钮动画
	.iconxihuan {
		transition: all .3s;
	}

	.iconxihuan:active {
		transform: scale(2);
	}

	// 双击点赞样式
	.fabulous-item {
		position: absolute;
		z-index: 99999;
		width: 100rpx;
		height: 100rpx;
		color: red;
		font-size: 100rpx;
		transition: opacity .5s, transform .5s;
		opacity: 1;
	}



	button {
		background-color: rgba(255, 255, 255, 0);
	}

	.popup {
		position: relative;
		width: 100%;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	.popup-top {
		padding: 10px 0px;
		position: sticky;
		top: 0px;
		left: 0rpx;
		z-index: 100000000;
		background-color: #FFFFFF;
	}

	.popup-bottom {
		position: fixed;
		left: 0;
		bottom: 0rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0px 20rpx 8rpx;
		box-sizing: border-box;
		z-index: 10000;
		height: 100rpx;
		background-color: #EAEAEA;
		flex-direction: initial;
	}

	.popup-text {
		font-size: 24rpx;
	}

	.popup-btn {
		display: inline-block;
		width: 110px;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DF851D;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		// margin-bottom: 20rpx;
	}

	.popup-btn2 {
		display: inline-block;
		width: 140px;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DF851D;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.popup-pay {
		color: #DF851D;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.popup-gold {
		text-align: left;
		position: fixed;
		bottom: 40rpx;
	}

	.popup-vip {
		width: 160px;
		height: 60rpx;
		line-height: 60rpx;
		border: 1px solid #DF851D;
		border-radius: 30rpx;
		color: #DF851D;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin: 0 auto;
	}

	.popupBtns {
		display: flex;
	}

	.Main-popup {
		padding: 30rpx 30rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.popup-add {
		display: inline-block;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DF851D;
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		margin-left: 8rpx;
	}

	.popup-react {
		display: inline-block;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		color: #c8c8c8;
		font-size: 30rpx;
		font-weight: 400;
		text-align: center;
		border: 1px solid #EAEAEA;
	}

	.selectBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		flex-direction: initial;
	}

	.selectBox:after {
		display: block;
		content: "";
		width: 28%;
		height: 0px;
	}

	.selectItem {
		width: 28%;
		position: relative;
	}

	.selectItem image {
		width: 100%;
		height: 260rpx;
		border-radius: 8rpx;
	}

	.selectItem .lockBox {
		width: 100%;
		height: 260rpx;
		border-radius: 8rpx;
		background-color: rgba(1, 1, 1, 0.5);
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
	}

	.lockBox image {
		width: 45px;
		height: 45px;
		margin: 0 auto;
	}

	.is_members {
		color: #FFFFFF;
		font-size: 20rpx;
	}

	.selectItem .active {
		border: 1px solid #ff5500;
		box-shadow: 1px 1px 10px;
	}

	.selectText {
		font-weight: bold;
		font-size: 28rpx;
		text-indent: 6rpx;
		text-align: center;
	}

	.popup1-bottom {
		text-align: center;
		line-height: 80rpx;
		padding-bottom: 30rpx;
	}

	.openHuiyuan {
		text-align: center;
		color: #FFFFFF;
		background-color: #F25011;
		margin-top: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.icon-Image {
		width: 18px;
		height: 16px;
	}

	.MainBox {
		.view-list {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 24rpx;
			box-sizing: border-box;
		}

		.view-list>view {
			border: 1px solid #808080;
			text-align: center;
			width: 30%;
			padding: 40rpx 0rpx;
		}

		.discountPrice {
			font-weight: 900;
			color: black;
			font-size: 50rpx;
		}

		.originalPrice {
			color: #bebebe;
			text-decoration: line-through;
		}

		.view-list>.active {
			border: 1px solid #f75200;
			background-color: #fea97e;
			opacity: 0.8;
		}
	}

	.costBox {
		.view-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}

		.view-list>.active {
			border: 1px solid #D9D9D9;
			background-color: #e21f0d;
			opacity: 0.8;
			color: #fff;
		}

		.view-list:after {
			display: block;
			content: "";
			width: 44%;
			height: 0px;
		}

		.view-list>view {
			width: 44%;
			padding: 10rpx 0rpx;
			border: 1px solid #d9d9d9;
			text-align: center;
			margin: 20rpx 0rpx;
			position: relative;
			overflow: hidden;
		}

		.saleStyle {
			position: absolute;
			top: 0rpx;
			right: -78rpx;
			width: 0rpx;
			height: 0rpx;
			border: 76rpx solid #000;
			border-color: #000000 transparent transparent transparent;
			color: #FFFFFF;
		}

		.saleText {
			position: absolute;
			top: -68rpx;
			right: -2rpx;
			font-size: 20rpx;
			width: 30px;
			transform: rotate(45deg);
		}

		.weixin-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.view-list>.popup-bottom {
			background-color: #808080;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 0px 20rpx;
		}

		.tip {
			color: #df851d;
		}

		.num {
			// font-size: 40rpx;
			// font-weight: 900;
		}

		image {
			width: 60px;
			height: 60px;
			vertical-align: middle;
		}

		.send_title {
			color: #df851d;
			font-size: 30rpx;
		}
	}
	
	.flex {
	  display:flex;
	  flex-direction:column;
	  flex-shrink: 0;
	  flex-grow: 0;
	  flex-basis: auto;
	  align-items: stretch;
	  align-content: flex-start;
	}
	
	swiper-item {
	  position: absolute;
	}
	button {
	  margin: 0;
	}
	.container {background-color: #000000;}
	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}
	.videoHover{
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0,0,0,0.1);
		justify-content: center;
		align-items: center;
		
		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}
	.playState{
		width:  160rpx;
		height: 160rpx;
		opacity: 0.2;
	}
	.userInfo{
		position: absolute;
		bottom:110px;
		right: 10px;
		flex-direction: column;
		
	}
	.userAvatar{
		border-radius: 500%;
		margin-bottom: 15px;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
	}
	.userAvatar{
		width : 100rpx;
		height: 100rpx;
	}
	.likeIco,.shareIco,.commentIco{
		width : 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}
	.likeNum,.commentNum,.shareTex{
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}
	.likeNumActive{
		color: red;
	}
	.content{
	  width: 720rpx;
	  z-index: 99;
	  position: absolute;
	  bottom: 30px;
	  /* justify-content: center; */
	  padding: 15rpx;
	  flex-direction: column;
	  justify-content: flex-start;
	  color: #ffffff;
	}
	.userName {
	  font-size: 30rpx;
	  color: #ffffff;
	  margin-top: 80upx;
	}
	.words {
	  margin-top: 10rpx;
	  font-size: 30rpx;
	  color: #ffffff;
	}
	.root{
		background-color: #000000;
	}
	.add-follow-btn {
		width: 40rpx;
		height: 40rpx;
		padding: 4rpx;
		border-radius: 100%;
		color: white;
		background-color: red;
		position: absolute;
		top:78rpx;
		left: 50%;
		transform: translateX(-50%);
		font-weight: bold;
		text-align: center;
		line-height: 32rpx;
	}
	.iconjia1 {
		font-size: 24rpx;
	}
	.add-img {
		width: 60rpx;
		height: 60rpx;
		margin: 0 auto;
	}
	.mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		z-index: 9;
	}
</style>
